<template>
	<el-button-group>
		<el-button
			v-for="item in buttonGroupOptions"
			:key="item.value"
			:type="item.value === modelValue ? 'primary' : 'default'"
			:icon="ElementPlusIconsVue[item.icon]"
			@click="handleClick(item)"
		>
			{{ item.label }}
		</el-button>
	</el-button-group>
</template>

<script setup name="RkButtonGroup">
import { computed } from 'vue';
import * as ElementPlusIconsVue from '@element-plus/icons-vue';
import { buttonOptions } from '@/config/button';

const props = defineProps({
	// 数据项配置
	'options': { type: [ String, Object, Array ] },
	// 即时信息
	'modelValue': {},
	// 是否立即执行change事件
	'immediate': { type: Boolean, default: false }
});
const emits = defineEmits(['update:modelValue', 'change']);

const buttonGroupOptions = computed(() => {
	const { options } = props;
	if (typeof options === 'string' || options instanceof String) {
		return buttonOptions[options] || [];
	} else {
		return options;
	}
});

const handleClick = function (item) {
	checkedItem.value = item
	emits('update:modelValue', item.value);
};

const getTargetItem = (targetValue) => {
	return buttonGroupOptions.value.filter(item => item.value === targetValue)[0]
}
const checkedItem = ref(getTargetItem(props.modelValue))
watch(checkedItem, (newValue) => {
	if (newValue) { emits('change', newValue) }
}, { deep: true, immediate: props.immediate })



</script>

<style lang="scss" scoped></style>
